<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI组件使用范例</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!-- 引入JQuery -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jQuery/jquery-1.11.3.min.js"></script>
	<!-- 引入EasyUI -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/eui/jquery.easyui.min.js"></script>
	<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/eui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入EasyUI的样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/eui/themes/default/easyui.css" type="text/css"/>
	<!-- 引入EasyUI的图标样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/eui/themes/icon.css" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jQuery/Utils.js"></script>
      <script type="text/javascript">
          $(function(){
              //console.info(g_contextPath);
              //console.info(g_basePath);
              //页面加载完成之后创建登录的dialog
              $('#loginAndRegisterForm').dialog({   
                  title: '用户登录',
                  width: 240,   
                  height: 150,   
                  closable: false,//设置dialog不允许被关闭
                  cache: false,   
                  modal: true,
                  buttons:[
                                {
                                text:'登录',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    //console.info(g_contextPath+'/servlet/LoginHandleServlet');
                                    //console.info(g_basePath+'/servlet/LoginHandleServlet');
                                    //console.info($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=123
                                    loginHandle();//处理用户登录
                                }
                            },
                            {
                                text:'重置',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    doReset('loginForm'); 
                                }
                            }
                        ]

              }); 
              
              /*重置form表单*/
              function doReset(formId){
                  $(':input','#'+formId)
                   .not(':button, :submit, :reset, :hidden')
                   .val('')
                   .removeAttr('checked')
                   .removeAttr('selected');
              }
              
              /*处理用户登录*/
              function loginHandle(){
                  $.ajax({
                    //url:g_contextPath+'/servlet/LoginHandleServlet',
                    url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
                    /*data:{
                        //data表示要提交到服务器端的数据，通常的写法
                        "userName":$("#userName").val(),
                        "userPwd":$("#userPwd").val()
                    },*/
                    //data表示要提交到服务器端的数据，更加简洁的写法
                    data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串
                    cahe:false,
                    /*
                    用dataType来指明服务器端返回的数据格式是一个json字符串，客户端接收到返回的json字符串之后，
                    Jquery会自动把这个json字符串转换成一个Json对象
                    */
                    dataType:'json',
                    success:function(r){
                        //此时的r已经是经过Jquery处理过之后的Json对象了
                        //console.info(r.msg);
                        if(r && r.success){
                            //调用dialog的close方法关闭dialog
                            $('#loginAndRegisterForm').dialog('close');
                            $.messager.show({
                                title:'消息',
                                msg:r.msg
                            });
                            //登录成功后跳转到系统首页
                            //window.location.replace(g_basePath+'/index.jsp');
                            //window.location.href = g_basePath+'/index.jsp';
                        }else{
                            $.messager.alert('消息',r.msg);
                        }
                    }
                });
              }
          });
      </script>
      
  </head>
  
  <body>
      孤傲苍狼
      <div id="loginAndRegisterForm">
          <form method="post" id="loginForm">
              <table>
                  <tr>
                      <th style="text-align:left;">
                          	用户名：
                      </th>
                      <td>
                          <!-- class="easyui-textbox"表示使用EasyUI的textbox组件-->
                          <input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/>
                      </td>
                  </tr>
                  <tr>
                      <th style="text-align:left;">
                          	密码：
                      </th>
                      <td>
                          <input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/>
                      </td>
                  </tr>
              </table>
          </form>
      </div>
  </body>
</html>